<template>
  <div class="calendar" :show="show">
    <div class="calendar-title">
      <span @click = "toPrev">pre</span><span @click = "toNext">next</span>
      {{year +"-" +month}}
    </div>
    <table class="calendar-content">
      <tr>
        <th class="calendar-cell" v-for="(item,key) in weeks">{{item}}</th>
      </tr>
      <tr v-if="rows" v-for="(cells,key) in rows">
        <td class="calendar-cell" :class="[cell.className]"   v-for="(cell,key) in cells">{{cell.text}}</td>
      </tr>
    </table>
  </div>
</template>

<script>

  const WEEKS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
  const ROW = 6;
  const COLUMN = 7;

  export default {
    name: 'calendar',
    component:{
    },
    data () {
      return {
        weeks:WEEKS, // 星期描述 Array
        year:null, // 选择的日历年 Number
        month:null, // 选择的月份 Number
        yearMonth:null, // 年月，watch是否改变了年月 String year-month
        rows:null, // 日历数据 Array [[],[],[],[],[],[],[]]
      }
    },
    props:{
      show:Boolean
    },
    computed:{

    },
    created(){
      this.initCalendar();
    },
    watch : {
      'yearMonth'(){
        this.renderCalendar();
      },
    },
    methods:{
      initCalendar(){
        var now = new Date();
        this.year = now.getFullYear();
        this.month = now.getMonth() + 1;
        this.changeYearMonth();
      },
      renderCalendar(){
        //当前月份cells
        var day = new Date(this.year,this.month - 1).getDay();
        var currentCells = [],
          currentLength = new Date(this.year,this.month,0).getDate();

        for(var i = 1 ;i <= currentLength;i++ ){
          let classNames = [];
          this.year == new Date().getFullYear() && this.month == new Date().getMonth() + 1 && new Date().getDate() == i &&  classNames.push('cur-date');
          currentCells.push({text:i,year:this.year,month:this.month,className:classNames.join(" ")});
        }

        //之前cells
        var preYear = this.month - 1 == 0 ? this.year - 1 : this.year;
        var prevMonth = this.month - 1 == 0 ? 12 : this.month - 1;
        var preLastDay = new Date(preYear,prevMonth,0).getDate();

        var preLength = day;
        var preCells = [];
        for(var i = 0 ;i < preLength;i++ ){
          let classNames = ['pre'];
          preCells.push({text:preLastDay - i,year:preYear,month:prevMonth,className:classNames.join(" ")});
        }
        preCells.reverse();

        //之后cells
        var nextYear = this.month + 1 == 13 ? this.year + 1 : this.year;
        var nextMonth = this.month + 1 == 13 ? 1 : this.month + 1;
        var nextFirstDay = 1;
        var nextCells = [],nextLength = ROW*COLUMN - preLength - currentLength;
        for(var i = 0 ;i < nextLength;i++ ){
          let classNames = ['next']
          nextCells.push({text:nextFirstDay + i,year:nextYear,month:nextMonth,className:classNames.join(" ")});
        }

        var cells = preCells.concat(currentCells,nextCells),
            rows = [];
        for(var i=0;i<ROW;i++){
          rows[i] = cells.slice(COLUMN*i,COLUMN*(i+1));
        }
        this.rows = rows;
      },
      changeYearMonth(){
        this.yearMonth = this.year + '-' + this.month;
      },
      toNext(){
        this.year = this.month == 12 ? this.year + 1 : this.year;
        this.month = this.month == 12 ? 1 : this.month + 1;
        this.changeYearMonth();
      },
      toPrev(){
        this.year = this.month == 1 ? this.year - 1 : this.year;
        this.month = this.month == 1 ? 12 : this.month - 1;
        this.changeYearMonth();
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  rel="stylesheet/scss" type="text/css" lang="scss" scoped >
  .calendar{
    text-align:center;
    .calendar-content{
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      .calendar-cell{
        width: 30px;
        height: 30px;
        padding: 4px;
        line-height: 30px;
        text-align: center;
        border-radius:50%;
        &.pre,&.next{
          color:#999;
        }
        &.cur-date{
          background-color: cadetblue;
          color:#fff;
        }
      }
    }
  }
</style>
